<template>
	<div>
		<el-card class="!border-none" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				询价清单以及要求
			</div>
			<div >
				<el-row>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">询价日期：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">货物种类：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">运输方式：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">航线选择：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">起运港：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">目的港：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">报价条款：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">货物描述：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">HS编码：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">柜形选择：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-card class="!border-none mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				产品信息
			</div>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="产品编号" prop="scene_name" align="center" >
					<template #default="{ row }">
						<span>01332380</span>
					</template>
				</el-table-column>
				<el-table-column label="产品名称" prop="上海AAAA有限公司" align="center" >
					<template #default="{ row }">
						<span>客户公司名称</span>
					</template>
				</el-table-column>
				<el-table-column label="总件数" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<span>2023-10-12 11:20:20</span>
					</template>
				</el-table-column>
				<el-table-column label="总毛重(kg)" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<span>默认</span>
					</template>
				</el-table-column>
				<el-table-column label="总体积(CBM)" prop="上海AAAA有限公司" align="center" >
					<template #default="{ row }">
						<span>砍价退单</span>
					</template>
				</el-table-column>
				<el-table-column label="总托数" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<span>2023-10-12 11:20:20</span>
					</template>
				</el-table-column>
			</el-table>
			<el-table class="mt-[20px]" size="large" :data="lists"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}">
				<el-table-column label="总件数" prop="scene_name" align="center" >
					<template #default="{ row }">
						<span>01332380</span>
					</template>
				</el-table-column>
				<el-table-column label="总毛重(kg)" prop="上海AAAA有限公司" align="center" >
					<template #default="{ row }">
						<span>客户公司名称</span>
					</template>
				</el-table-column>
				<el-table-column label="总体积(CBM)" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<span>2023-10-12 11:20:20</span>
					</template>
				</el-table-column>
				<el-table-column label="总托数" prop="上海AAAA有限公司" align="center">
					<template #default="{ row }">
						<span>默认</span>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card class="!border-none mt-[20px]" shadow="never">
			<div class="topTitle font-bold main-color text-2xl mb-5">
				报价
			</div>
			<div >
				<el-row>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">报价条款：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">RMB费用：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">海运费USD：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">目的港费用合计：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">报价有效期：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">海运费合计：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">船公司：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">报价有效期：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">航次：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="main-color v-flex">
							<span class="w-[120px] text-right">航程：</span>
							<span class="v-wordBreak ml-[10px]">1223245</span>
						</div>
					</el-col>
				</el-row>
				<el-row class="mt-[20px]">
					<el-col :span="6">
						<div class="main-color v-flex v-col-top">
							<span class="w-[120px] text-right mr-[10px]">上传截图：</span>
							 <el-image style="width: 107px; height: 107px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover" />
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
	const lists = ref<Array<any>>([
		{}, {}, {}
	])
</script>

<style>
</style>